<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
		<script src="./js/hero.js"></script>
		<style>
			.panel {
				width: 900px;
				margin: 10px auto;
			}

			.table img {
				width: 40px;
				height: 40px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="panel panel-primary">
				<!-- Default panel contents -->
				<div class="panel-heading">英雄列表管理</div>
				<div class="panel-body">
					<!-- 存放的搜索区域 -->
					<form action="" autocomplete="off">
						<div class="row">
							<div class="col-lg-3">
								<input type="text" class="form-control" placeholder="输入英雄名称" name="name" />
							</div>
							<div class="col-lg-3">
								<select class="form-control" name="gender">
									<option value="">--选择性别--</option>
									<option value="男">男</option>
									<option value="女">女</option>
								</select>
							</div>
							<div class="col-lg-3">
								<input name="age" type="text" class="form-control" placeholder="输入年龄" />
							</div>
							<div class="col-lg-3">
								<button type="button" class="btn btn-success" id="search">搜索</button>
								<button type="button" class="btn btn-warning" id="reset">重置</button>
							</div>
						</div>
					</form>
				</div>
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>编号</th>
							<th>英雄名称</th>
							<th>英雄性别</th>
							<th>年龄</th>
							<th>操作区</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<tr>
							<td>1</td>
							<td>大乔</td>
							<td>女</td>
							<td>18</td>
							<td>
								<button type="button" class="btn btn-danger">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<script>
			// 数据可以自己添加
			const list = [
				{ id: 1, name: "大乔", gender: "女", age: 18 },
				{ id: 2, name: "小乔", gender: "女", age: 20 },
				{ id: 3, name: "鲁班", gender: "男", age: 48 },
				{ id: 4, name: "后羿", gender: "男", age: 28 },
				{ id: 5, name: "狄仁杰", gender: "男", age: 28 },
				{ id: 6, name: "钟馗", gender: "男", age: 58 },
				{ id: 7, name: "妲己", gender: "女", age: 20 },
				{ id: 8, name: "露娜", gender: "女", age: 18 }
			]
		</script>
	</body>
</html>
